<template>
	<view class="hr" :style="{paddingLeft: paddingH, paddingRight: paddingH, paddingTop: paddingV, paddingBottom: paddingV}">
		<view class="line left" :style="{borderWidth: lineWeight, borderColor: lineColor,}"></view>
		<view v-if="text!=''" class="text" :style="{color: textColor, fontSize: textSize,}">{{text}}</view>
		<view class="line right" :style="{borderWidth: lineWeight, borderColor: lineColor,}"></view>
	</view>
</template>

<script>
	export default {
		props:{
			lineColor: {type: String, default: 'black'},
			lineWeight: {type: [Number, String], default: '1px'},
			text: {type: String, default: '已经到底了'},
			textColor: {type: String, default: 'black'},
			textSize: {type: [Number, String], default: 'small'},
			textPos: {type: String, default: 'center'},					// left，center，right
			paddingH: {type: [String, Number], default: '25rpx'},		// 左右的padding
			paddingV: {type: [String, Number], default: '10rpx'},		// 左右的padding
			icon: {type: String, default: ''},							// 图标动画
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
	.hr{
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		align-items: center;
	}
	
	.line{
		border-style: solid;
		border-collapse: collapse;
		flex-grow: 1;
		flex-shrink: 1;
		border-bottom: none;
		box-shadow: 0 1px 1px 0 white;
	}
	
	.text{
		text-align: center;
		flex-grow: 0;
		flex-shrink: 0;
	}
</style>
